<!--
 * @FileDescription 首页
 * @Author lz
 * @Date 20230117 15:03:05
 * @LastEditors lz
 * @LastEditTime 20230117 15:03:05
-->
<template>
  <div class="wp" v-show="state.showType">
    <hdr></hdr>
    <!-- <a-progress :stroke-color="{
            from: '#108ee9',
            to: '#87d068',
        }" :percent="49.9" status="active" /> -->
    <div class="ColorBoxO" :class="state.current == 0 ? 'currentBox' : ''" @click="ColoSele(0)">
      <div class="num_b" v-if="state.current == 0">01</div>
      <div
        class="col"
        :class="state.current == 0 ? 'curTxt' : ''"
        v-if="state.current == 0"
      >
        演示
      </div>
      <div class="col retract" v-else>演示模式</div>
      <div class="PromptText" v-if="state.current == 0">
        <img src="/images/ic_教学模式.png" class="pro_img" />
        <span class="pro_txt">开启演示模式</span>
      </div>
      <img src="/images/ic_教学模式.png" class="retract_img" v-else />
      <div class="Tip_txt" v-if="state.current == 0">
        演示模式用于教师授课，给予提示，协助完成学习
      </div>
      <div class="Open_btn" v-if="state.current == 0" @click="enter(1)">
        <span> 点击进入 </span>
        <img src="/images/Group.png" class="op_img" />
      </div>
      <img src="/images/bt_start.png" class="retract_img_2" v-else />
      <img src="/images/pic_教学.png" class="MainImage" v-if="state.current == 0" />
    </div>
    <div class="ColorBoxT" :class="state.current == 1 ? 'currentBox' : ''" @click="ColoSele(1)">
      <div class="col" :class="state.current == 1 ? 'curTxt' : ''"></div>
      <div class="num_b" v-if="state.current == 1">02</div>
      <div class="col" :class="state.current == 1 ? 'curTxt' : ''" v-if="state.current == 1">
        训练
      </div>
      <div class="col retract" v-else>训练模式</div>
      <div class="PromptText" v-if="state.current == 1">
        <img src="/images/ic_训练模式.png" class="pro_img" />
        <span class="pro_txt">开启训练模式</span>
      </div>
      <img src="/images/ic_训练模式.png" class="retract_img" v-else />
      <div class="Tip_txt" v-if="state.current == 1">
        训练模式用于实训训练，给予提示，协助完成训练
      </div>
      <div class="Open_btn" v-if="state.current == 1" @click="enter(2)">
        <span> 点击进入 </span>
        <img src="/images/Group.png" class="op_img" />
      </div>
      <img src="/images/bt_start.png" class="retract_img_2" v-else />
      <img src="/images/pic_训练.png" class="MainImage" v-if="state.current == 1" />
    </div>
    <div class="ColorBoxR" :class="state.current == 2 ? 'currentBox' : ''" @click="ColoSele(2)">
      <div class="col" :class="state.current == 2 ? 'curTxt' : ''"></div>
      <div class="num_b" v-if="state.current == 2">03</div>
      <div class="col" :class="state.current == 2 ? 'curTxt' : ''" v-if="state.current == 2">
        考核
      </div>
      <div class="col retract" v-else>考核模式</div>
      <div class="PromptText" v-if="state.current == 2">
        <img src="/images/ic_考核模式.png" class="pro_img" />
        <span class="pro_txt">开启考核模式</span>
      </div>
      <img src="/images/ic_考核模式.png" class="retract_img" v-else />
      <div class="Tip_txt" v-if="state.current == 2">
        考核模式用于实训考核，不给予提示，协助完成考核
      </div>
      <div class="Open_btn" v-if="state.current == 2" @click="enter(3)">
        <span> 点击进入 </span>
        <img src="/images/Group.png" class="op_img" />
      </div>
      <img src="/images/bt_start.png" class="retract_img_2" v-else />
      <img src="/images/pic_考核.png" class="MainImage LeftPositioning" v-if="state.current == 2" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick, reactive } from "vue";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import hdr from "./Hdr/index.vue";
import { useRouter } from "vue-router";
import HomeContent from "./HomeContent";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import MessageCode from "./MessageCode";
import SplashComponent from "@components/Splash/SplashComponent";

const router = useRouter();
const state = reactive({
  current: 0,
  showType: false,
});
//模式切换
function ColoSele(id: number) {
  state.current = id;
}

function loadFile(name: any) {
  // name为文件所在位置
  let xhr = new XMLHttpRequest();
  const okStatus = document.location.protocol === "file:" ? 0 : 200;
  xhr.open("GET", name, false);
  xhr.overrideMimeType("text/html;charset=utf-8"); //默认为utf-8
  xhr.send(null);
  return xhr.status === okStatus ? xhr.responseText : null;
}

// 故障点选择
async function enter(index: number) {
  sessionStorage.setItem("timeStart", JSON.stringify(new Date().getTime()));
  HomeContent.Default.ModeType.value = index;
  let aaa = loadFile("./project.config.txt");
  console.log("aaaaaaaaaaaaaaa", aaa);

  await HomeContent.Default.Awake(aaa);

  //系统初始化
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.SYSTEM_INITIALIZE
    )
  );
  //获取视角
  setTimeout(async () => {
    HomeContent.Default.ProgressVal.value = 85;
  }, 600);
  let ViewArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.VIEW_DATA_MENU
    )
  );
  HomeContent.Default.ViewData.value = JSON.parse(ViewArr.Content).Result;

  //模式设置
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.SYSTEM_SET_MODE,
      `${index}`
    )
  );
  // 获取故障点数据
  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_GET
    )
  );
  console.log(JSON.parse(newArr.Content).Result);
  HomeContent.Default.FaultPointData.value = JSON.parse(newArr.Content).Result;
  setTimeout(async () => {
    HomeContent.Default.ProgressVal.value = 100;
  }, 1200);
  setTimeout(async () => {
    router.push("FaultPoint");
    HomeContent.Default.Loaded.value = false;
  }, 1600);
}
// 平台任务启动
async function PlatformTaskInitiation() {
  let aaa = loadFile("./project.config.txt");
  await HomeContent.Default.Awake(aaa);
  HomeContent.Default.ModeType.value = HomeContent.Default.CacheFullData.value.Mode;
  console.log('平台任务启动',HomeContent.Default.ModeType.value);
  
  //系统初始化
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.SYSTEM_INITIALIZE
    )
  );
  //获取视角
  setTimeout(async () => {
    HomeContent.Default.ProgressVal.value = 85;
  }, 600);
  HomeContent.Default.ProgressText.value = "模块资源初始化";

  let ViewArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.VIEW_DATA_MENU
    )
  );
  HomeContent.Default.ViewData.value = JSON.parse(ViewArr.Content).Result;
  if (HomeContent.Default.CacheFullData.value.Mode == 1) {
    //模式设置
    await WebSocketComponent.Default.PostMessageAsync(
      new ClientMessage.DiagnosisAdapterRequest(
        MessageCode.Default.MsgCodesList.SYSTEM_SET_MODE,
        `2`
      )
    );
  } else if (HomeContent.Default.CacheFullData.value.Mode == 2) {
    //模式设置
    await WebSocketComponent.Default.PostMessageAsync(
      new ClientMessage.DiagnosisAdapterRequest(
        MessageCode.Default.MsgCodesList.SYSTEM_SET_MODE,
        `3`
      )
    );
  }
  HomeContent.Default.ProgressText.value = "题目资源初始化";
  //设置故障
  await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_FAULT_SET,
      HomeContent.Default.CacheFullData.value.FaultPointCollection.toString()
    )
  );

  setTimeout(async () => {
    HomeContent.Default.ProgressVal.value = 100;
  }, 1000);
  setTimeout(async () => {
    router.push("WindowPage");
    HomeContent.Default.Loaded.value = false;
  }, 1600);
}

onMounted(async function () {
  //初始化链接
  await SplashComponent.Default.InitializeAsync();
  if (HomeContent.Default.CacheFullData.value) {
    if (HomeContent.Default.CacheFullData.value.FaultPointCollection) {
      PlatformTaskInitiation();
    } else {
      state.showType = true;
    }
  } else {
    state.showType = true;
  }
});
</script>

<style scoped>
.wp {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  color: #fff;
  background-color: #c3d0ff;
}

.ColorBoxO {
  position: relative;
  width: 240px;
  height: 100%;
  background-color: #ddf599;
  float: left;
  transition: 0.4s;
}

.ColorBoxT {
  width: 240px;
  position: relative;
  height: 100%;
  background-color: #cfacfa;
  transition: 0.4s;
  float: left;
}

.ColorBoxR {
  width: 240px;
  position: relative;
  height: 100%;
  background-color: #c3d0ff;
  transition: 0.4s;
  float: left;
}

.currentBox {
  width: 1440px;
  /* transition: 0.5s; */
  writing-mode: horizontal-tb;
}

.col {
  writing-mode: vertical-lr;
  font-size: 48px;
  font-weight: 600;
  position: absolute;
  color: #000;
}

.curTxt {
  position: absolute;
  left: 269px;
  top: 578px;
  writing-mode: horizontal-tb;
}

.PromptText {
  line-height: 60px;
  position: absolute;
  left: 60px;
  top: 60px;
}

.pro_img {
  width: 60px;
  height: 60px;
  margin-top: -10px;
}

.pro_txt {
  font-size: 24px;
  font-weight: 400;
  line-height: 60px;
  color: #000000;
  padding-left: 20px;
}

.num_b {
  font-size: 300px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 60px;
  top: 320px;
}

.Tip_txt {
  width: 328px;
  height: 60px;
  font-size: 20px;
  font-weight: 400;
  color: #202020;
  line-height: 23px;
  position: absolute;
  left: 272px;
  top: 694px;
}

.Open_btn {
  width: 196px;
  height: 66px;
  background: #000000;
  border-radius: 4px 4px 4px 4px;
  line-height: 60px;
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  padding-left: 24px;
  position: absolute;
  left: 269px;
  bottom: 102px;
}

.op_img {
  width: 28px;
  margin-top: -5px;
  margin-left: 16px;
}

.MainImage {
  width: 900px;
  height: 900px;
  position: absolute;
  right: 0;
  top: 63px;
}

.LeftPositioning {
  left: 540px;
}

.retract {
  left: 50%;
  top: 160px;
  transform: translate(-50%, 0%);
}

.retract_img {
  width: 60px;
  position: absolute;
  left: 90px;
  top: 60px;
}

.retract_img_2 {
  width: 64px;
  position: absolute;
  bottom: 100px;
  right: 88px;
}
</style>
